<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="top">xxxx</div>


<div id="top1">
    <div>哈哈哈1</div>
    <div>哈哈哈2</div>
    <div>哈发出表表格哈哈3</div>
    <div>哈哈哈4</div>
    <div>哈哈哈5</div>
    <div class="xxx">哈哈哈6</div>
    <div>哈哈哈7</div>
    <div>哈朝夕相处发哈哈8</div>
    <div>哈哈哈9</div>
    <div>哈哈哈10</div>
    <span>
        <div>哈哈哈</div>
    </span>

    <div style="height: 20px;"></div>
    <div>

    </div>


    <ul>
        <li>John</li>
        <li>Karl</li>
        <li>Brandon</li>
    </ul>
    <ul>
        <li>Glen</li>
        <li>Tane</li>
        <li>Ralph</li>
    </ul>
    <!--<input disabled type="text">-->
    <input id="yyy" type="text">
    <button type="button" id="btn">你好</button>
    <button disabled>你好</button>

</div>

</body>

<script src="jquery-3.4.0.min.js"></script>
<script>

    // Js的原生写法
    var x = document.getElementById('top');
    // x.style.color = 'red';
    // x.style.fontSize = '20px';
    // x.style.backgroundColor = 'blue'


    // var top1s = document.querySelectorAll('#top1 div');
    //
    // for (var i = 0; i < top1s.length; i++) {
    //     top1s[i].onclick = function () {
    //         console.log(this.innerHTML)
    //     }
    // }

    console.dir(x);




    // $(function () {
    //
    // })

    //Jquery的写法
    // $('#top').css('color', 'blue')
    // $('#top').css({'color':'red', 'font-size':'12px', 'background-color':'green'})

    // $('#top1 div').click(function () {
    //     console.log(this.innerHTML)
    // })
    var y = $('#top');
    // 将Jquery对象转成原生对象
    // console.dir(y[0]);

    // console.log(y);
    // 将原生对象转成Jquery对象
    // console.log($(x))

    // var x1 = $('#top, #top1 .xxx').css('color','red')

    // $('.xxx + div').css('color','red')
    // $('.xxx ~ div').css('color','red')

    // $('#top1 div:first').css('color','red');
    // $('#top1 > div:last').css('color','red');

    //eq() 根据索引选中符合要求的元素
    // $('#top1 div:eq(2)').css('color','red');
    //gt 大于
    // $('#top1 div:gt(2)').css('color','red');
    //lt 小于
    // $('#top1 div:lt(2)').css('color','red');

    // $('#top1 div:not(.xxx)').css('color','red');
    // $('#top1 div:not(#top1 div:lt(2))').css('color','red');

    //根据元素包含的文本的内容是否含有某个字符串来选择
    // $('#top1 div:contains("发出")').css('color','red');

    // $('#top1 div:empty').css({'height':'100px', 'width':'100px', 'background':'red'})

    //todo 待定
    // $('#top1 div:has(.xxx)').css('color','red');
    // $(':has(.xxx)').css('color','red');

    //匹配有子元素的
    // $('#top1 div:parent').css({'background':'red'})

    // $("ul li:first-child").css('color','red');
    //
    // $(':disabled').val('哈哈哈哈哈')
    // $('input:disabled').val('哈哈哈哈哈')

    var divs = document.querySelectorAll('#top1 > div');

    // for (var i in divs){
    //
    //     divs[i].style.color = 'red'
    // }

    // var divs = $('#top1 > div');
    // $.each 其实就是对我们js中的遍历的一个扩展
    // $.each(divs, function () {
    //     console.log(this.style.color = 'red')
    // })

    // var obj = {
    //     name: '二狗子',
    //     age: 28,
    //     girl: 'no'
    // };

    // $.each(obj, function (x, y) {
    //     console.log(x);
    //     console.log(y);
    // })

    // var arr = ['大哥', '二哥', '三地'];
    // $.each(arr, function (x, y) {
    //     console.log(x);
    //     console.log(y);
    // })

    // var s1 = ' fssfdfsgdg ';
    // console.log(s1.length)
    // //去除两端空白
    // s1 = $.trim(s1)
    // console.log(s1.length)

    var divs = $('#top1 > div');

    // divs.css('color', 'red').css('font-size', '20px').css({'background':'green'})
    // 如果不传参 就是获取一个元素的高度
    // console.log($('.xxx').height());
    // 如果传参就表示设置高度
    // $('.xxx').height(30)

    // 不传参 就相当于原生innerHTML
    // console.log($('.xxx').html())
    // $('.xxx').html('<span>大哥好</span>')

    // $('.xxx').text('<span>大哥好</span>')

    // $('#btn').click(function () {
    //
    //     console.log($('#yyy').val('SADDFGHJK'))
    //
    // })











</script>

</html>